<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>【穷游网】出境游_旅游攻略_自助游攻略_游记攻略_境外旅游 旅途永无止尽</title>
    <link rel="stylesheet" href="css/registerIndex.css"/>
    <link rel="icon" href="loginImages/app_qyer.png"/>
    <script>
        setInterval(function(){
            var tt=document.title;
            document.title=tt.substr(1)+tt.charAt(0);
        },50);
    </script>
</head>
<body>
    <div class="layer">
        <div class="main">
            <div class="logo">
                <em style="font-size: 40px; color: white; font-family: 'rockwell extra bold';">Trip    <span style="font-size: 30px;">注册</span></em>
                <em class='logo_em' ></em>
            </div>

                <div id="register">
                    <div class="box bo_rg">
                        <div id="phone_register" class="clearfix">
                            <a href="#" class="current">邮箱注册</a>
                            <a href="#">手机注册</a>
                        </div>
                        <div id="big">
                            <div class="no current">
                                <div class="email_add clearfix">
                                  <input type="text" placeholder="输入用于登录的邮箱地址">
                                    <em></em>
                                </div>
                                <div class="yanzheng clearfix">
                                    <input type="text" placeholder="图片识别码">
                                    <input type="text" class="txt" id='code' readonly>
                                    <em></em>
                                </div>
                                <div class="send clearfix">
                                    <input type="text" placeholder="输入邮件中的验证码">
                                    <button  id='btn'>发送验证码</button>
                                    <em></em> 
                                    <!--
                                    	作者：314954609@qq.com
                                    	时间：2017-10-29
                                    	描述：
                                    <span id='span'></span>-->
                                </div>
                                <div class="username clearfix">
                                    <input type="text" placeholder="起一个具有辨识度的用户名">
                                    <em>注：用户名暂不支持更改</em>
                                </div>
                                <div class="password">
                                    <input type="password" placeholder="密码必须大于6位">
                                    <em></em>
                                    <div id='stren'>
                                        <i>密码强度:</i>
                                        <i id='strength'></i>
                                        <div id='strengthLevel' class="strengthLv0"></div>
                                    </div>

                                </div>
                            </div>
                            <div class="no">
                                <div class="email_add clearfix">
                                    <div id="mask"></div>
                                    <div id="rece" class="clearfix">
                                        <div id="rece_left">

                                            <ul id='ul'>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                                <li>007</li>
                                            </ul>
                                        </div>
                                        <div id="rece_right">
                                            <div id='scrool'></div>
                                        </div>
                                    </div>
                                    <div id="first">
                                        <i>
                                            <s>◇</s>
                                        </i>

                                    </div>
                                    <input type="text" id='first_phone' placeholder="输入用址用于登录的手机号码">
                                    <em></em>
                                </div>
                                <div class="yanzheng clearfix">
                                    <input type="text" placeholder="图片识别码">
                                    <input type="text" class="txt" id='code1' readonly>
                                    <em></em>
                                </div>
                                <div class="send clearfix">
                                    <input type="text" placeholder="输入短信中的验证码">
                                    <button>发送验证码</button>
                                   <em></em>
                                </div>
                                <div class="username clearfix">
                                    <input type="text" placeholder="起一个具有辨识度的用户名">
                                    <em>注：用户名暂不支持更改</em>
                                </div>

                                <div class="password">
                                    <input type="password" placeholder="密码必须大于6位">
                                    <em></em>
                                    <div id='stren1'>
                                        <i>密码强度:</i>
                                        <i id='strength1'></i>
                                        <div id='strengthLevel1' class="strengthLv0"></div>
                                    </div>

                                </div>
                            </div>

                        </div>


                        <button class="ensure"><a href="loginIndex.html">注册</a></button>
                        <div class="has">
                            <em>已有trip账号?</em>
                            <a href="#">登录</a>
                    <span>
                        <em>同意</em>
                        <a href="#">会员条款</a>
                        <em>和</em>
                        <a href="#">免责声明</a>
                    </span>
                        </div>

                    </div>

            </div>

        </div>
</div>

 <div class="regi_bottom clearfix">
     <div class="regi_top clearfix">
         <div class="left">
             <dl>
                 <dt>关于我们</dt>
                 <dd><a href="#">trip简介</a></dd>
                 <dd><a href="#">联系我们</a></dd>
                 <dd><a href="#">合作伙伴</a></dd>

             </dl>
             <dl>
                 <dt>加入trip</dt>
                 <dd><a href="#">招聘职位</a></dd>


             </dl>
             <dl>
                 <dt>网站条款</dt>
                 <dd><a href="#">会员条款</a></dd>
                 <dd><a href="#">社区指南</a></dd>
                 <dd><a href="#">版权声明</a></dd>
                 <dd><a href="#">合作伙伴</a></dd>
             </dl>
            
         </div>
         <div class="right">
             <span>关注我们</span>
             <div class="tu">
                 <a href="#" class="a1"></a>
                 <a href="#" class="a2"></a>
                 <a href="#" class="a3"></a>
                 <a href="#" class="a4"></a>
                 <a href="#" class="a5"></a>
                 <a href="#" class="a6"></a>
             </div>
         </div>
     </div>

       <div class="bot">
          
           <p>2004-2015 © trip网™ qyer.com All rights reserved.京公网安备11010502023470</p>
           <p>trip网为旅行者提供原创实用的出境游旅行指南和旅游攻略、旅行社区和问答交流平台，并提供签证、保险、机票、酒店预订、租车等服务</p>
       </div>
 </div>
<div class="fix" id='fix'>
    <div id="feedback">
        <span></span>
        <div id="feed">
            <div id="feed_top">
         <textarea id="feed_txt" cols="30" rows="10">
           aaaaaaa
         </textarea>
                <div id=feed_bot>
                    <em>联系方式</em>
                    <input type="text" id="" placeholder="请将您的邮箱或手机号码告诉我们">
                </div>

            </div>
        </div>
    </div>
    <span></span>
</div>

    <script src='jquery-1.12.4.js'></script>
    <script>
     var tab=document.getElementById('phone_register');
        var as=tab.getElementsByTagName('a');
     var big=document.getElementById('big');
     var divs=big.getElementsByClassName('no');
        for(var i=0;i<as.length;i++)
        {   as[i].index=i;
            as[i].onclick=function()
            {
                for(var j=0;j<as.length;j++)
                {
                    as[j].className="";
                    divs[j].className="no";
                }
                this.className='current';
                divs[this.index].className='no current';
            }
        }

        $('.email_add>input')[0].onblur=function()
        {
                 if(this.value=="")
                 {  this.nextElementSibling.className='name1';
                     this.nextElementSibling.innerHTML='必须输入登录的邮箱地址';
                 }
            else{
                     if(/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_]+([.][a-zA-Z]+){1,2}$/.test(this.value))
                 {
                     this.style.background='url(loginImages/right.png) no-repeat right';

                     this.nextElementSibling.innerHTML='';
                     this.nextElementSibling.className='';
                 }
                 else{
                     this.nextElementSibling.className='name1';
                     this.nextElementSibling.innerHTML='登录的邮箱地址格式错误';
                     this.style.background='';
                 }

                 }


        }
     $('.email_add>input')[1].onblur=function()
     {
           if(this.value=="")
           {    this.nextElementSibling.className='name1';
               this.nextElementSibling.innerHTML='必须输入手机号';
           }
         else{
               if(/^1[34578][0-9][0-9]{8}$/.test(this.value))
               {
                   this.style.background='url(loginImages/right.png) no-repeat right';

                   this.nextElementSibling.innerHTML='';
                   this.nextElementSibling.className='';
               }
               else{
                   this.nextElementSibling.className='name1';
                   this.nextElementSibling.innerHTML='登录的手机号码格式错误';
                   this.style.background='';
               }
           }


     }


     $('.send>input')[0].onblur=function()
     {
              if(this.value=="")
              {this.nextElementSibling.nextElementSibling.className='name1';
                  this.nextElementSibling.nextElementSibling.innerHTML='必须输入验证码';
              }
        else{
                  if(this.value===$('#span').text())
                  {
                      this.style.background='url(loginImages/right.png) no-repeat right';
                      this.nextElementSibling.nextElementSibling.innerHTML='';
                      this.nextElementSibling.nextElementSibling.className='';
                  }
                  else{
                      this.nextElementSibling.nextElementSibling.className='name1';
                      this.nextElementSibling.nextElementSibling.innerHTML='邮件中的验证码输入不正确';
                      this.style.background='';

                  }
              }

     }

     $('.send>input')[1].onblur=function()
     {
         if(this.value=="")
         {this.nextElementSibling.nextElementSibling.className='name1';
             this.nextElementSibling.nextElementSibling.innerHTML='必须输入验证码';
         }
         else{
             if(/\d{4}/.test(this.value))
             {
                 this.style.background='url(loginImages/right.png) no-repeat right';
                 this.nextElementSibling.nextElementSibling.innerHTML='';
                 this.nextElementSibling.nextElementSibling.className='';
             }
             else{
                 this.nextElementSibling.nextElementSibling.className='name1';
                 this.nextElementSibling.nextElementSibling.innerHTML='邮件中的验证码输入不正确';
                 this.style.background='';

             }
         }
     }
     var num2=document.getElementById('code1');
     var txt=document.getElementById('code');
//     num2.style.background='red'
//
     function create()
{var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    var code="";
    for( var i=0; i <4; i++ )
        code+=possible.charAt(Math.floor(Math.random()*possible.length));
    return code;

}
    window.onload=function()
    {
        txt.value=create();
     num2.value=create();

//
    }
   num2.onclick=function()
    {
       num2.value=create();
    }
     txt.onclick=function()
     {
         txt.value=create();
     }


     $('.yanzheng>input')[0].onblur=function()
     {

         if(this.value=="")
         {
             this.nextElementSibling.nextElementSibling.className='name1';
//             this.value='请输入图片识别码';
             this.nextElementSibling.nextElementSibling.innerHTML='请输入图片识别码';
             return;
         }
         else{
             if(this.value.length==4)
             {
                 if(this.value===txt.value)
                 {
                     this.style.background='url(loginImages/right.png) no-repeat right';
                     this.nextElementSibling.nextElementSibling.innerHTML='';
                     this.nextElementSibling.nextElementSibling.className='';
                 }
                 else{
                     this.nextElementSibling.nextElementSibling.className='name1';
                     this.nextElementSibling.nextElementSibling.innerHTML='输入错误';
                     this.style.background='';
                 }
             }
             else{this.nextElementSibling.nextElementSibling.className='name1';
                 this.nextElementSibling.nextElementSibling.innerHTML='输入错误';
                 this.style.background='';

             }

         }
     }
     $('.yanzheng>input')[2].onblur=function()
     {

         if(this.value=="")
         {
             this.nextElementSibling.nextElementSibling.className='name1';
//             this.value='请输入图片识别码';
             this.nextElementSibling.nextElementSibling.innerHTML='请输入图片识别码';
             return;
         }
         else{
             if(this.value.length==4)
             {
                 if(this.value===num2.value)
                 {
                     this.style.background='url(loginImages/right.png) no-repeat right';
                     this.nextElementSibling.nextElementSibling.innerHTML='';
                     this.nextElementSibling.nextElementSibling.className='';
                 }
                 else{
                     this.nextElementSibling.nextElementSibling.className='name1';
                     this.nextElementSibling.nextElementSibling.innerHTML='输入错误';
                     this.style.background='';
                 }
             }
             else{
                 this.nextElementSibling.nextElementSibling.className='name1';
                 this.nextElementSibling.nextElementSibling.innerHTML='输入错误';
                 this.style.background='';

             }

         }
     }
     $('.username>input')[0].onblur=function()
     {  this.nextElementSibling.innerHTML="";

             if(this.value.length>3&&this.value.length<15)
             {
                 this.style.background='url(loginImages/right.png) no-repeat right';

                 this.nextElementSibling.innerHTML='';
                 this.nextElementSibling.className='';
             }
             else{
                 this.nextElementSibling.className='name1';
                 this.nextElementSibling.innerHTML='用户名长度需为3-15个字符';
                 this.style.background='';
             }

     }
     $('.username>input')[1].onblur=function()
     {  this.nextElementSibling.innerHTML="";

         if(this.value.length>3&&this.value.length<15)
         {
             this.style.background='url(loginImages/right.png) no-repeat right';

             this.nextElementSibling.innerHTML='';
             this.nextElementSibling.className='';
         }
         else{
             this.nextElementSibling.className='name1';
             this.nextElementSibling.innerHTML='用户名长度需为3-15个字符';
             this.style.background='';
         }

     }

      $('.password>input')[0].onblur=function()
      {  if(this.value.trim().length==0)
      {this.nextElementSibling.className='name1';
      	this.nextElementSibling.innerHTML='必须输入密码';
          
      }
      }
     $('.password>input')[0].onkeyup=function()
     { this.nextElementSibling.className='name1';
         if(this.value.length<6)
         {
          this.nextElementSibling.innerHTML='密码长度需要大于6位';
             document.getElementById("strengthLevel").className="strengthLv0";
         }
         else{
             this.nextElementSibling.innerHTML="";
             this.nextElementSibling.removeAttribute('class');
             var lvl=0;//级别
             if (/[0-9]/.test(this.value)) {//有数字则1
                 lvl++;
             }
             if (/[a-zA-Z]/.test(this.value)) {//有字母则 2
                 lvl++;
             }
             if (/[^0-9a-zA-Z]/.test(this.value)) {//特殊符号
                 lvl++;
             }

             document.getElementById("strengthLevel").className="strengthLv"+lvl;
             if(lvl==1)
             {
                 $('#strength').text('弱');
             }
             if(lvl==2)
             {
                 $('#strength').text('中');
             }
             if(lvl==3)
             {
                 $('#strength').text('强');
             }
         }


     }
     $('.password>input')[1].onblur=function()
     {  if(this.value.trim().length==0)
     {this.nextElementSibling.innerHTML='必须输入密码';
         this.nextElementSibling.className='name1';
     }
     }
     $('.password>input')[1].onkeyup=function()
     { this.nextElementSibling.className='name1';
         if(this.value.length<6)
         {
             this.nextElementSibling.innerHTML='密码长度需要大于6位';
             document.getElementById("strengthLevel1").className="strengthLv0";
         }
         else{
             this.nextElementSibling.innerHTML="";
             this.nextElementSibling.removeAttribute('class');
             var lvl=0;//级别
             if (/[0-9]/.test(this.value)) {//有数字则1
                 lvl++;
             }
             if (/[a-zA-Z]/.test(this.value)) {//有字母则 2
                 lvl++;
             }
             if (/[^0-9a-zA-Z]/.test(this.value)) {//特殊符号
                 lvl++;
             }

             document.getElementById("strengthLevel1").className="strengthLv"+lvl;
             if(lvl==1)
             {
                 $('#strength').text('弱');
             }
             if(lvl==2)
             {
                 $('#strength').text('中');
             }
             if(lvl==3)
             {
                 $('#strength').text('强');
             }
         }


     }
  var bar=$('#scrool')[0];
     var scrool=$('#rece_right')[0];
     var content=$('#ul')[0];
     var big=$('#rece_left')[0];
bar.onmousedown=function(e)
  { var spaceY=e.pageY-bar.offsetTop;
      document.onmousemove=function (e) {//一会还要改
          var top=e.pageY-spaceY;
          top=top<0?0:top;
          top=top>scrool.offsetHeight-bar.offsetHeight?scrool.offsetHeight-bar.offsetHeight:top;
          bar.style.top=top+"px";
          window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

          var contentMaxMove=content.offsetHeight-big.offsetHeight;
          //获取滚动条的最大的移动距离
          var barMaxMove=scrool.offsetHeight-bar.offsetHeight;
          //文本的移动的距离
          var y=top*contentMaxMove/barMaxMove;
          content.style.marginTop=-y+"px";
      };

  }
     document.onmouseup=function () {
         document.onmousemove=null;
     };


        $('#first').click(
                function(){
                    var status=$('#rece').css('display');
                    if(status=='block')
                    {
                        $('#rece').css('display','none');
                        $('#mask').css('display','none');}
                    else{
                        $('#rece').css('display','block');
                        $('#mask').css('display','block');
                    }
                }
        );
        $('#ul>li').click(function(){
            $('#first').text($(this).text());
            $('#rece').css('display','none');
            $('#mask').css('display','none');

        });
     $('#ul>li').mouseenter(function(){

         $(this).css('backgroundColor','lightgray').siblings().css('backgroundColor','');
     });

     $('.fix span').click(function(){
//       $('#feedback').animate({'right':0,'top':100},1000);

//        $('#feedback span').css('position','relative');
         $('#feedback').show(1000);
         $(this).hide();

//            $(this).addClass('fixx').removeClass('fix');
//        $(this).css('background',' url("loginImages/icons_feedback.png") -40px 0 no-repeat');
     });
     $('#feedback span').click(function(){
         $('#feedback').hide();
         $('.fix span').show();
     });
     var num=60;
        $('#btn').click(function(){
            $(this)[0].disabled=true;
          $('#span').text(create());

//       alet
         var time=setInterval(function(){
                num--;
             $('.send em')[0].className='aa';
             $('.send em')[0].innerHTML="";
                $('.send em')[0].innerHTML='你还有'+num+"秒后重新发送！";
                if(num==0)
                {    clearInterval(time);
                     $('#btn')[0].disabled=false;
                    console.log($(this)[0].disabled);
                    $('.send em')[0].innerHTML='重新获取验证码';
                    num=60;
                }

            },1000)
        });
    </script>
</body>
</html>